<!-- author: lizq -->
<!-- date: 2022-06-23 16:35:19 -->
<!-- description: table-操作区 -->
<template>
  <div class="container-operate">
    <div class="left">
      <div v-if="showLeft">
        <el-button v-hasBut="['A']" type="primary" icon="Plus" @click="operate(1)">新增</el-button>
        <el-button v-if="showSort" v-hasBut="['S']" type="primary" plain icon="Sort" title="排序" @click="operate(2)">排序</el-button>
        <el-button v-hasBut="['I']" type="primary" icon="Download" plain @click="operate(3)">导入</el-button>
        <el-button v-hasBut="['E']" type="primary" icon="Upload" plain @click="operate(4)">导出</el-button>
        <el-button v-hasBut="['B']" type="danger" icon="Delete" @click="operate(5)">删除</el-button>
      </div>
    </div>
    <div v-if="showRight" class="right">
      <!-- <el-tooltip v-if="showSearch" effect="dark" content="搜索栏" placement="top">
        <el-button class="right-btn" icon="Search" @click="operate(10)" />
      </el-tooltip> -->
      <el-tooltip v-if="showExpand" effect="dark" :content="openShow ? '收起' : '展开'" placement="top">
        <el-button class="right-btn open-btn" :icon="openShow ? 'DArrowLeft' : 'DArrowRight'" @click="operate(6)" />
      </el-tooltip>
      <el-tooltip effect="dark" content="刷新" placement="top">
        <el-button class="right-btn" icon="Refresh" @click="operate(7)" />
      </el-tooltip>
      <el-tooltip effect="dark" content="列设置" placement="top">
        <el-button class="right-btn" icon="Filter" @click="configShow = true" />
      </el-tooltip>
    </div>
  </div>
  <!-- 列设置 -->
  <G-table-column v-model="configShow" :header-data="tableHeader" @update-column="(arr) => operate(8, arr)"></G-table-column>
  <!-- 已选择 ** 项 -->
  <div v-if="selectNum != 0" class="num">
    <div>已选择 {{ selectNum }} 项</div>
    <div>
      <el-button type="primary" link @click="operate(9)">取消选择</el-button>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";

// 参数值               全限值
//    1    新增          A
//         编辑          U
//         删除          D
//    3    导入          I
//    4    导出          E
//    2    排序          S
//    5    批量删除      B
//    6    展开/收起
//    7    刷新
//    8    列设置
//    9    取消勾选

const $props = defineProps({
  selectNum: { type: Number, default: 0 },
  showExpand: { type: Boolean, default: false },
  showSort: { type: Boolean, default: false },
  showRight: { type: Boolean, default: true },
  showLeft: { type: Boolean, default: true },
  tableHeader: { type: Object, default: () => {} },
  showSearch: { type: Boolean, default: true }
});

const $emit = defineEmits(["callBackData"]);

const state = reactive({
  openShow: false,
  configShow: false
});
const { openShow, configShow } = toRefs(state);

//操作-回调
const operate = (val, obj = []) => {
  if (val == 5 && !$props.selectNum) {
    ElMessage({
      message: "请至少勾选一条数据",
      type: "warning"
    });
    return;
  } else if (val == 6) {
    //展开收起
    state.openShow = !state.openShow;
  }
  $emit("callBackData", val, obj);
};
</script>
<style lang="scss" scoped>
.container-operate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .right {
    .el-button + .el-button {
      margin-left: 0;
    }
    .right-btn {
      margin-right: 10px;
    }

    .open-btn {
      :deep(.el-icon) {
        transform: rotate(90deg);
      }
    }
    :deep(.filter-popover) {
      width: auto !important;
      .el-checkbox {
        display: block;
        margin-right: 0;
        margin-bottom: 15px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.num {
  border: 1px solid #abdcff;
  background-color: #f0faff;
  font-size: 14px;
  margin-bottom: 20px;
  padding: 8px 20px 8px 16px;
  display: flex;
  justify-content: space-between;
}
</style>
